<template>
    <el-card class="box-card">
      <itable :table="tconfig.tableConfig" :tableData="tconfig.tableData" :page-bean="tconfig.pageBean" @pageChange="pageChange">
        <template #searchBox>
          <Eform
            :model="form"
            :elem="fromData"
            :submit="true"
            :reset="true"
            :button="false"
            okIcon="Search"
            btnSize="small"
            submitText="搜索"
            @onSuccess="onSuccess"
            @onReset="onReset"
            >
          </Eform>
        </template>
        <template #headerbtn>
          <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="clickadd">新增</el-button>
        </template>
        <template #onreason>
          <el-button type="text" v-for="(item, index) in btn" @click="clickbtn(index)" :icon="item.icon">{{ item.name }}</el-button>
        </template>
      </itable>

      <el-dialog
      :title="title?'新增':'编辑'"
      v-model="dialogVisible"
      width="50%">
      <Eform
          :model="dform"
          :rules="drules"
          :elem="dfromData"
          btnSize="large"
          :submit="false"
          :reset="false"
          :button="false"
          ref="ruleFormRef"
          labelPosition="left"
        >
      </Eform>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="clickCancel">取 消</el-button>
          <el-button type="primary" @click="clickComfig">保 存</el-button>
        </span>
    </template>
    </el-dialog>
    </el-card>
</template>

<script setup lang='ts'>
import { reactive, ref } from 'vue';
import itable from '@/components/table/table.vue'
import { PageBean } from "@/utils/page-bean";
import Eform from '@/components/eform/index.vue';
import { ElMessage, ElMessageBox } from 'element-plus'

let title = ref(0)
let dialogVisible = ref(false)
let showform = ref(true)
let fromData = reactive([
    {
      label: "设备名称",
      prop: "deviceName",
      clearable: true,
    },
    {
      label: "厂家",
      prop: "factoryName",
      clearable: true,
    },
    {
      element:'select',
      label: "设备类型",
      prop: "type",
      option:[
        {label:'全部',value:'1'}
      ],
      clearable: true,
    },
    {
      label: "设备编码",
      prop: "deviceCode",
      clearable: true,
    }
])
let form = reactive({
  deviceName:'',
  factoryName:'',
  type:'1',
  deviceCode:''
})
let dfromData = reactive([
  {
    label: "设备名称",
    prop: "deviceName",
    labelWidth:'100px',
    size:'large',
    clearable: true,
  },
  {
    label: "厂家",
    prop: "factoryName",
    labelWidth:'100px',
    size:'large',
    clearable: true,
  },
  {
    label: "物联编码",
    prop: "deviceCode",
    labelWidth:'100px',
    size:'large',
    clearable: true,
  },
  {
    label: "设备类型",
    prop: "type",
    labelWidth:'100px',
    element:'select',
    option:[
      {label:'视频',value:'0'}
    ],
    size:'large',
    clearable: true,
  },
  {
    label: "扩展信息",
    labelWidth:'100px',
    type:'textarea',
    size:'large',
    prop: "info",
    clearable: true,
  },
  {
    label: "是否有开关",
    prop: "isbtn",
    element:'radio',
    option:[
      { value:'0', label:'是' },
      { value:'1', label:'否' },
    ],
    labelWidth:'100px',
    size:'large',
    clearable: true,
  },
])
let drules = reactive({
  deviceName:[
    { required: true, message: '请输入设备名称', trigger: 'blur' },
  ],
  factoryName:[
    { required: true, message: '请输入厂家名称', trigger: 'blur' },
  ],
  type:[
    { required: true, message: '请选择设备类型', trigger: 'change' },
  ]
})
let dform = reactive({
  deviceName:'',
  factoryName:'',
  type:'',
  deviceCode:'',
  isbtn:'0',
  info:''
})
let btn = reactive([
  {name:'编辑',icon:'el-icon-edit'},
  {name:'删除',icon:'el-icon-delete'}
])
const tconfig = reactive({
  tableConfig: {} as {loading:boolean,[propName:string]:any},
  tableData: [{currenttime:'1',costtime:'2',onreason:'3',watermeter:'true'}] as any[],
  pageBean: new PageBean(10, 1, 0),
})

// 重置
const onReset = () => {
  console.log('77')
}
// 提交
const onSuccess = (form) => {
  console.log(form)
}

// 新增
const clickadd = () => {
  // title.value = 1
  // dialogVisible.value = true
  showform.value = !showform.value
}

let ruleFormRef = ref()
const clickComfig = () => {
  ruleFormRef.value.validate()
}
const clickCancel = () => {
  ruleFormRef.value.concel()
}

// 编辑、删除
const clickbtn = (i) => {
  if(i == 0){
    // 编辑
    title.value = 0
    dialogVisible.value = true
  }else{
    // 删除
    ElMessageBox.confirm('是否删除ID为5的设备','提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    ).then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
  }
}
// 分页
const pageChange = () => {

}
// 初始化表格
const initTable = () => {
  tconfig.tableConfig = {
    loading: false,
    hasSelect: false,
    hasIndex: true,
    hasOperation: false,
    hasSearch: true,
    hasPage: false,
    headerShowBtn:false,
    tr: [
      {
        label: "设备名称",
        prop: "currenttime",
      },
      {
        label: "设备类型",
        prop: "costtime",
      },
      {
        label: "厂家",
        prop: "onreason",
      },
      {
        label: "项目",
        prop: "onreason",
      },
      {
        label: "项目编码",
        prop: "onreason",
      },
      {
        label: "扩展信息",
        prop: "onreason",
      },
      {
        label: "操作",
        prop: "onreason",
        fixed:'right',
        show:'template'
      }
    ]
  }
}
initTable()
</script>

<style lang='scss' scoped>
:deep(.el-dialog__body){
  .el-form>.el-form-item{
    width: 45%;
    margin-bottom: 20px;
    margin-left: 10px;
  }
  .el-select{
    width: 100%;
  }
}
.dialog-footer{
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
